<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <Form ref="formInline" :model="conditions" inline :label-width="100" :show-message="false">
        <!-- <div class="searchBox">
          <div class="conditionBox">
            <Row>
              <Col :span="6">
                <FormItem label="用户名：">
                  <Input v-model.trim="conditions.name" clearable placeholder="用户名/真实姓名"></Input>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div>-->
      </Form>
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="addUser">添加角色</Button>
      </div>
    </div>
    <Table :columns="columns1" :height="tableHeight" border :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="create_time">
        <span>{{row.create_time|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="update_time">
        <span>{{row.update_time|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="show(row)">
          <Icon size="18" type="ios-create-outline" />编辑
        </span>
        <!-- <span class="tableBtn" @click="remove(row.id)">
          <Icon size="18" type="ios-trash" />删除
        </span>-->
      </template>
    </Table>
    <!-- <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>-->
    <Modal v-model="isAdd" :title="id?'编辑角色':'添加角色'" @on-ok="ok('formInline')" @on-cancel="cancel">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="name" label="角色名：">
          <Input
            type="text"
            v-model.trim="formInline.name"
            placeholder="Username"
            style="width：300px"
          ></Input>
        </FormItem>
        <FormItem label="权限菜单：">
          <br />
          <Tree
            :data="asyncRouteMap"
            :render="renderContent"
            @on-check-change="getCheckedNodes"
            :expand="true"
            show-checkbox
          ></Tree>
          <!-- <Tree ref="tree" :data="asyncRouteMap" @on-check-change="changeNode" :expand="true" show-checkbox></Tree> -->
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="ok('formInline')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { addGroup, groupList, modifyGroup } from "../../api/account";
import { asyncRouteMap } from "../../router/index.js";
import { miceList } from "../../api/exhibitors";

export default {
  data() {
    return {
      list: [],
      mices: [],
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      asyncRouteMap: JSON.parse(JSON.stringify(asyncRouteMap)),
      conditions: {
        is_use: "",
        role_id: "",
        username: "",
        supplier_id: ""
      },
      columns1: [
        {
          title: "id",
          key: "id",
          align: "center"
        },
        {
          title: "角色名",
          key: "name",
          align: "center"
        },
        {
          title: "更新时间",
          slot: "update_time",
          align: "center"
        },
        {
          title: "创建时间",
          slot: "create_time",
          align: "center"
        },
        {
          title: "操作",
          slot: "action",
          width: 200,
          align: "center"
        }
      ],
      tableHeight: 100,
      isAdd: false,
      isFixed: false,
      id: "",
      formInline: {
        name: "",
        menu: []
      },
      ruleInline: {
        name: [
          {
            required: true,
            message: "请输入角色名",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getgroupList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    getCheckedNodes(e) {
      this.formInline.menu = e;
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          }
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-paper-outline"
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.meta.title)
          ])
        ]
      );
    },
    checkStatus(e, name, pname) {
      this[pname][name] = e;
    },
    getgroupList() {
      this.loading = true;
      const { page, pageSize } = this;
      groupList({ page: page - 1, pageSize }).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data;
          this.loading = false;
        } else {
          this.loading = false;
          this.$Message.error(res.msg);
        }
      });
    },
    show(row) {
      this.formInline = {
        name: row.name,
        menu: row.menu ? JSON.parse(row.menu) : []
      };
      this.asyncRouteMap = JSON.parse(JSON.stringify(asyncRouteMap));
      console.log(this.asyncRouteMap);
      this.formInline.menu.forEach(e => {
        this.asyncRouteMap.forEach(item => {
          if (e.name == item.name) {
            Object.assign(item, { checked: true });
          }
          if (item.children) {
            item.children.forEach(i => {
              if (e.name == i.name) {
                Object.assign(i, { checked: true });
              }
            });
          }
        });
      });
      this.$set(this.asyncRouteMap);
      this.isAdd = true;
      this.id = row.id;
    },
    changePage(e) {
      this.page = e;
      this.getgroupList();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getgroupList();
    },
    addUser() {
      this.formInline = {
        name: "",
        menu: ""
      };
      this.isAdd = true;
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        const { name, menu } = this.formInline;
        console.log(menu);
        if (valid) {
          if (!this.id) {
            addGroup({ name, menu: JSON.stringify(menu) }).then(res => {
              if (res.status) {
                this.isAdd = false;
                this.getgroupList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            modifyGroup({
              name,
              menu: JSON.stringify(menu),
              id: this.id
            }).then(res => {
              if (res.status) {
                this.isAdd = false;
                this.getgroupList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          }
        } else {
        }
      });
    },
    cancel() {
      this.isAdd = false;
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
